<template>
  <el-descriptions title="服务单信息" :column="1" border>
    <el-descriptions-item
      label="服务单号"
      label-class-name="my-label"
      class-name="my-content"
      width="15"
      >
      {{ prop.info.id }}</el-descriptions-item>
    <el-descriptions-item label="申请状态" 
      >{{ Order.statusEnum[prop.info.status] }}</el-descriptions-item
    >
    <el-descriptions-item label="订单编号"
      >{{ prop.info.orderSn }}  <el-link :underline="false" type="primary" style="font-size: 14px;" @click="checkout">查看</el-link></el-descriptions-item
    >
    <el-descriptions-item label="申请时间">
      {{
        prop.info.createTime
          ? dayjs(prop.info.createTime).format("YYYY-MM-DD HH:mm:ss")
          : "/"
      }} 
    </el-descriptions-item>
    <el-descriptions-item label="用户账户"
      >{{ prop.info.memberUsername }}</el-descriptions-item
    >
    <el-descriptions-item label="联系人">
      {{ prop.info.returnName }}
    </el-descriptions-item>
    <el-descriptions-item label="联系电话">
      {{prop.info.returnPhone}}
    </el-descriptions-item>
    <el-descriptions-item label="退货原因">
      {{ prop.info.reason }}
    </el-descriptions-item>
    <el-descriptions-item label="问题描述">
      {{ prop.info.description }}
    </el-descriptions-item>
    <el-descriptions-item label="凭证图片">
      <el-image :src="prop.info.proofPics" style="width: 85px;min-height: 85px;vertical-align: middle;"></el-image>
    </el-descriptions-item>
  </el-descriptions>
</template>
<script setup lang="ts">
import { Order } from "@/request/api";
import * as dayjs from "dayjs";
import { useRouter } from "vue-router";
  let prop = defineProps<{
    info:any
  }>()
  let router = useRouter()
  const checkout = function(){
    router.push({path:"/oms/orderDetail",query:{id:prop.info.orderId}})
  }
</script>
<style scoped>
.my-label {
  background: var(--el-color-success-light-9);
}
.my-content {
  background: var(--el-color-danger-light-9);
}
</style>
